import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import c from './layout.module.less'
import * as echarts from "echarts";
export default defineComponent({
    name: 'child',
    setup() {

        let barRoundedChart: any = null;
        const barRoundedChartRef = ref(null);

        onMounted(() => {
            console.log('我是孩子组件');
            drawbarRoundedChart()
        })

        // 绘制饼图环形2
        const drawbarRoundedChart = () => {
            barRoundedChart = echarts.init(barRoundedChartRef.value);
            const option = {
                title: {
                    text: "第四个数据"
                },
                tooltip: {
                    trigger: "item"
                },
                legend: {
                    top: "5%",
                    left: "center"
                },
                series: [
                    {
                        name: "Access From",
                        type: "pie",
                        radius: ["40%", "70%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: "#fff",
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: "center"
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: "bold"
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: "Search Engine" },
                            { value: 735, name: "Direct" },
                            { value: 580, name: "Email" },
                            { value: 484, name: "Union Ads" },
                            { value: 300, name: "Video Ads" }
                        ]
                    }
                ]
            };
            barRoundedChart.setOption(option);
        };

        onUnmounted(() => {
            if (barRoundedChart != null && barRoundedChart.dispose) {
                barRoundedChart.dispose();
            }
        })
        return () => {
            return (
                <>
                    <div class={c.domOne} ref={barRoundedChartRef}></div>
                    <div>555</div>
                </>
            )
        }
    }
})